<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Amaze UI Admin form Examples</title>
<meta name="description" content="这是一个form页面">
<meta name="keywords" content="form">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="../../assets/i/favicon.png">
<link rel="apple-touch-icon-precomposed" href="../../assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<link rel="stylesheet" href="../../assets/css/amazeui.min.css" />
<link rel="stylesheet" href="../../assets/css/amazeui.switch.css" />
<link rel="stylesheet" href="../../assets/css/admin.css">
<link rel="stylesheet" type="text/css" href="../../assets/css/wangEditor.min.css">
<!-- webuploader百度上传控件 -->
<link rel="stylesheet" type="text/css" href="../../assets/css/webuploader.css">

<script type="text/javascript">
 function getAttributeType(){
	var productTypeId=document.getElementById("productTypeId").value;
	var productAttributeTrHtml = "";
	$.ajax({
		url: "/productAttribute/ajaxProductAttribute",
		dataType: "json",
		data:{productTypeId: productTypeId},
		async: false,
		contentType: "application/json;charset=utf-8",
		success: function(json) {
			$.each(json, function(i) {
				if(json[i]["attributeType"] == 'checkbox') {
					var productAttributeOption = "";
					var attributeOptionList = json[i]["attributeOptionList"];
					if(typeof attributeOptionList === "string")
						attributeOptionList = JSON.parse(json[i]["attributeOptionList"]);
					
					for(var k = 0; k < attributeOptionList.length; k++) {
						productAttributeOption += '<input type="checkbox" name=' + json[i].id + ' value="' + attributeOptionList[k]+'"/>'+ attributeOptionList[k];
					}
					productAttributeTrHtml +='<div class="am-g am-margin-top id="productAttributeContentTr"><div class="am-u-sm-4 am-u-md-2 am-text-right">'+json[i].name+':</div><div class="am-u-sm-8 am-u-md-8">'+productAttributeOption+'</div><div class="am-hide-sm-only am-u-md-6"></div></div>'
				}
				if(json[i]["attributeType"] == 'radio') {
					var productAttributeOption = "";
					var attributeOptionList = json[i]["attributeOptionList"];
					if(typeof attributeOptionList === "string")
						attributeOptionList = JSON.parse(json[i]["attributeOptionList"]);
					
					for(var k = 0; k < attributeOptionList.length; k++) {
						productAttributeOption += '<input type="radio" name=' + json[i].id + ' value="' + attributeOptionList[k]+'"/>'+ attributeOptionList[k];
					}
					productAttributeTrHtml +='<div class="am-g am-margin-top ><div class="am-u-sm-4 am-u-md-2 am-text-right">'+json[i].name+':</div><div class="am-u-sm-8 am-u-md-8">'+productAttributeOption+'</div><div class="am-hide-sm-only am-u-md-6"></div></div>'
				}
				if(json[i]["attributeType"] == 'alphaint' || json[i]["attributeType"] == 'number' || json[i]["attributeType"] == 'text' || json[i]["attributeType"] == 'date' ) {
					productAttributeTrHtml +=' <div class="am-g am-margin-top id="productAttributeContentTr"><div class="am-u-sm-4 am-u-md-2 am-text-right">'+json[i].name+':</div><div class="am-u-sm-8 am-u-md-4"><input type="text" class="am-input-sm" name="'+ json[i].id +'" /></div><div class="am-hide-sm-only am-u-md-6"></div></div>'
				}
				
				
			})

			document.getElementById("typeItem").innerHTML=productAttributeTrHtml;
		}
	});
	
	 
 }
</script>
<% 
 var isAdd = false;
 var isEdit = false; 
if(isEmpty(product.id)){
 isAdd = true; 
 }else{ 
isEdit = true; }%>
</head>
<body>
	<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

	<header class="am-topbar am-topbar-inverse admin-header">
		<div class="am-topbar-brand">
			<strong>Amaze UI</strong> <small>后台管理模板</small>
		</div>

		<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
			data-am-collapse="{target: '#topbar-collapse'}">
			<span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span>
		</button>

		<div class="am-collapse am-topbar-collapse" id="topbar-collapse">

			<ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
				<li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 收件箱 <span class="am-badge am-badge-warning">5</span></a></li>
				<li class="am-dropdown" data-am-dropdown><a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;"> <span
						class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span>
				</a>
					<ul class="am-dropdown-content">
						<li><a href="#"><span class="am-icon-user"></span> 资料</a></li>
						<li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
						<li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
					</ul></li>
				<li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span
						class="admin-fullText">开启全屏</span></a></li>
			</ul>
		</div>
	</header>
	<div class="am-cf admin-main">
		<!-- 引用菜单header_menu.html sidebar start -->

		<% include("/includes/header_menu.html"){} %>
		<!-- sidebar end -->

		<!-- content start -->
		<div class="admin-content">
			<div class="am-cf am-padding am-padding-bottom-0">
				<div class="am-fl am-cf">
					<strong class="am-text-primary am-text-lg">商品管理</strong> / <small> 添加商品</small>
				</div>
			</div>
			<hr>
			<div class="admin-content-body" class="am-u-sm-12" style="padding: 0px 5px 0px 0px; margin: 0px; height: 700px;">
				<form  name="Form" class="am-form" action="/product/insert" method="post" >
					<!-- 选项卡 start -->
					<div class="am-tabs " data-am-tabs="{noSwipe: 1}" id="doc-tab-demo-1">
						<ul class="am-tabs-nav am-nav am-nav-tabs">
							<li class="am-active"><a href="javascript: void(0)">基本信息</a></li>
							<li><a href="javascript: void(0)">商品图片</a></li>
							<li><a href="javascript: void(0)">商品描述</a></li>
							<li><a href="javascript: void(0)">商品属性</a></li>
						</ul>
						<!-- 选项卡内容 -->
						<div class="am-tabs-bd">
							<!-- 第1个  start -->
							<div class="am-tab-panel am-active">
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">商品名称:</div>
									<div class="am-u-sm-8 am-u-md-4">
										<input type="text" class="am-input-sm" name="product.name" value="${product.name!}" required />
									</div>
									<div class="am-hide-sm-only am-u-md-6">*必填，不可重复</div>
								</div>
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">货号:</div>
									<div class="am-u-sm-8 am-u-md-4">
										<input type="text" class="am-input-sm" name="product.productSn" value="${product.productSn!}" title="若留空则由系统随机生成" />
									</div>
									<div class="am-hide-sm-only am-u-md-6"></div>
								</div>
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">商品分类:</div>
									<div class="am-u-sm-8 am-u-md-4" style="float: left">
										<select name="product.productCategory_id" class="{required: true}">
											<option value=""></option> <%for(list in productCategoryTreeList){%>
											<option value="${list.id}"<%if (list.id+"" == product.productCategory_id!){%> selected<%}%>>
											 <%if (list.level !=0){%> <%for( i in range(0,list.level)){%>------<%}%> <%}%> ${list.name}</option> <%}%>

										</select>
									</div>
								</div>
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">商品品牌:</div>
									<div class="am-u-sm-8 am-u-md-4" style="float: left">
										<select name="product.brand_id" class="{required: true}">
											<option value=""></option> <%for(list in allBrand){%>
											<option value="${list.id}"<%if (list.id+"" == product.brand_id!){%> selected <%}%>> ${list.name}</option> <%}%>
										</select>
									</div>
								</div>

								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">本店售价:</div>
									<div class="am-u-sm-8 am-u-md-4">
										<input type="text" class="am-input-sm" name="product.price" value="${product.price!}" />
									</div>
									<div class="am-hide-sm-only am-u-md-6"></div>
								</div>

								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">市场售价:</div>
									<div class="am-u-sm-8 am-u-md-4">
										<input type="text" class="am-input-sm" name="product.marketPrice" value="${product.marketPrice!" 0"}"/>
									</div>
									<div class="am-hide-sm-only am-u-md-6"></div>
								</div>
								<!--  这里积分  缺少积分  这里写积分，积分没有写呢 积分！！！！！！ -->
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">商品重量:</div>
									<div class="am-u-sm-8 am-u-md-4">
										<input type="text" class="am-input-sm" name="product.weight" value="${product.weight!" 0"}" title="0表示不计重量" />
										<select name="weightUnit" data-am-selected="{btnSize: 'sm'}" >
											<%for(map in allWeightUnit){%>
													<option value="${map.key}">${map.value}</option> <%}%>
										</select>
									</div>
									<div class="am-hide-sm-only am-u-md-6"></div>
								</div>
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">库存量:</div>
									<div class="am-u-sm-8 am-u-md-4">
										<input type="text" class="am-input-sm" name="product.store" value="${product.store!0}" title="只允许输入零或正整数，为空表示不计库存" />
									</div>
									<div class="am-hide-sm-only am-u-md-6"></div>
								</div>
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">是否精品推荐:</div>
									<div class="am-u-sm-4 am-u-md-4" style="float: left">
										<label><input type="radio" name="product.isBest" value="true"<%if (product.isBest! == true){%> checked<%}%> />是</label> 
											<label><input type="radio" name="product.isBest" value="false"<%if (isAdd || product.isBest == false){%> checked<%}%> />否</label>
									</div>
									<div class="am-hide-sm-only am-u-md-6"></div>
								</div>
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">是否新品推荐:</div>
									<div class="am-u-sm-4 am-u-md-4" style="float: left">
										<label><input type="radio" name="product.isNew" value="true"<%if (product.isNew! == true){%>
											checked<%}%> />是</label> <label><input type="radio" name="product.isNew" value="false"<%if (isAdd ||
											product.isNew == false){%> checked<%}%> />否</label>
									</div>
									<div class="am-hide-sm-only am-u-md-6"></div>
								</div>
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">是否热销推荐:</div>
									<div class="am-u-sm-4 am-u-md-4" style="float: left">
										<label><input type="radio" name="product.isHot" value="true"<%if (product.isHot! == true){%> checked<%}%> />是</label> 
									    <label><input type="radio" name="product.isHot" value="false"<%if (isAdd || product.isHot == false){%> checked<%}%> />否</label>
									</div>
									<div class="am-hide-sm-only am-u-md-6"></div>
								</div>
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">是否上架:</div>
									<div class="am-u-sm-4 am-u-md-4" style="float: left">
										<label><input type="radio" name="product.isMarketable" value="true"<%if (isAdd || product.isMarketable! == true){%> checked<%}%> />是</label> 
											<label><input type="radio" name="product.isMarketable" value="false"<%if (product.isMarketable! == false){%> checked<%}%> />否</label>
									</div>
									<div class="am-hide-sm-only am-u-md-6"></div>
								</div>
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">页面关键词:</div>
									<div class="am-u-sm-8 am-u-md-4" style="float: left">
										<input type="text" class="am-input-sm" name="product.metaKeywords" value="${product.metaKeywords!}" />
									</div>
									<div class="am-hide-sm-only am-u-md-6"></div>
								</div>
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">页面描述:</div>
									<div class="am-u-sm-8 am-u-md-4" style="float: left">
										<textarea name="product.metaDescription" rows="7">${product.metaDescription!}</textarea>
									</div>
									<div class="am-hide-sm-only am-u-md-6"></div>
								</div>
							</div>
							<!-- 第1个 end -->
							<!-- 第2个 start-->
<!-- 							<div id="uploader-demo" class="am-tab-panel">
								    用来存放item
								    <div id="fileList" class="uploader-list"></div>
								    <div id="filePicker">选择图片</div>
							</div> -->
							<div class="am-tab-panel" >
								
								<button type="button" class="am-btn am-btn-primary" data-am-modal="{target: '#my-alert',width: 900}">Alert</button>

							</div>
							
							<!-- 第2个 end -->
							<!-- 第3个 start-->
							<div class="am-tab-panel">
								<div class="am-g am-margin-top">
									 <textarea id="textarea1" name="product.description" style="width: 100%; height: 450px;">${product.description!}</textarea> 
								</div>
							
							</div>
							<!-- 第3个 end -->
							<!-- 第4个 start-->
							<div class="am-tab-panel">
								<div class="am-g am-margin-top">
									<div class="am-u-sm-4 am-u-md-2 am-text-right">商品类型:</div>
									<div class="am-u-sm-8 am-u-md-4" style="float: left">
											<select name="product.productType_id" id="productTypeId" onchange="getAttributeType()">
													<option value="">请选择...</option>
												<%for(list in allProductType){%>
													<option value="${list.id}"<%if ((isEdit) && (list.id+"" == product.productType_id)){%> selected <%}%>>${list.name}</option>
												<%}%>
											</select>
									</div>
									<div class="am-hide-sm-only am-u-md-6"></div>
								</div>
								<div  class="am-g am-margin-top" id="typeItem">
									
								</div>
							</div>
							<!-- 第4个 end -->
						</div>
					</div>
					<!-- 选项卡 start -->
					<br />

					<div class="am-margin">
						<button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
						<button type="button" class="am-btn am-btn-primary am-btn-xs" onclick="window.history.back(); return false;">放弃保存</button>
					</div>
				</form>
			</div>
			
		</div>
		<!-- content end -->

	</div>
	<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

	<footer>
		<hr>
		<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
	</footer>

	<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="../../assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
  <div class="am-modal-dialog" >
    <div class="am-modal-hd">Amaze UI</div>
    <div class="am-modal-bd">
     <div id="uploader-demo">
		<div id="fileList" class="uploader-list"></div>
		<div id="filePicker">选择图片</div>
	</div>
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>

</body>

	<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="../../assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

	<!--[if (gte IE 9)|!(IE)]><!-->
	<script src="../../assets/js/jquery.min.js"></script>
	<!--<![endif]-->
	<script src="../../assets/js/amazeui.min.js"></script>
	<script src="../../assets/js/app.js"></script>
	<script type="text/javascript" src="../../assets/js/wangEditor.min.js"></script>
	<!-- webuploader百度上传控件 -->
	<script src="../../assets/js/webuploader.js"></script>

<script type="text/javascript">
    // 获取元素
    var textarea = document.getElementById('textarea1');
    // 生成编辑器
    var editor = new wangEditor(textarea);
 	// 上传图片（举例）
    editor.config.uploadImgUrl = '/upload';
    editor.config.uploadImgFileName = 'myFileName'
	 // 隐藏掉插入网络图片功能。该配置，只有在你正确配置了图片上传功能之后才可用。
    editor.config.hideLinkImg = true;
    editor.create();
</script>
<script type="text/javascript">

// 鍥剧墖涓婁紶demo
jQuery(function() {
    var $ = jQuery,
        $list = $('#fileList'),
        // 浼樺寲retina, 鍦╮etina涓嬭繖涓€兼槸2
        ratio = window.devicePixelRatio || 1,

        // 缂╃暐鍥惧ぇ灏�
        thumbnailWidth = 100 * ratio,
        thumbnailHeight = 100 * ratio,

        // Web Uploader瀹炰緥
        uploader;

 // 初始化Web Uploader
    uploader = WebUploader.create({

    	// 选完文件后，是否自动上传。
        auto: true,

        // swf文件路径
       // swf: BASE_URL + '/js/Uploader.swf',

       // 文件接收服务端。
        server: '/product/upload',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',

     
       // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

 // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
            $img = $li.find('img');

        $list.append( $li );

        //创建缩略图
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
    });

 // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress span');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
        }

        $percent.css( 'width', percentage * 100 + '%' );
    });

 // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).addClass('upload-state-done');
    });

 	// 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

     // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败');
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });
});
</script>

</html>
